<template>
    <div class="top-info">
        <div class="top-info__item">
            <div class="icon" style="background-color: #4373F1;"></div>
            <div class="label">今日预警机构</div>
            <div class="value">{{ dataInfo.todayWarningOrg }}</div>
        </div>
        <div class="top-info__item">
            <div class="icon" style="background-color: #8677FA;"></div>
            <div class="label">今日处置数</div>
            <div class="value">{{ dataInfo.todayHandled }}</div>
        </div>
        <div class="top-info__item">
            <div class="icon" style="background-color: #FF4E4C;"></div>
            <div class="label">总预警机构</div>
            <div class="value">{{ dataInfo.totalWarningOrg }}</div>
        </div>
        <div class="top-info__item">
            <div class="icon" style="background-color: #69CE7A;"></div>
            <div class="label">总处置数</div>
            <div class="value">{{ dataInfo.totalHandled }}</div>
        </div>
    </div>
</template>

<script>
import {toDayWarn,analysisResult, hospitalNationList,warnList, getWarnType} from "@/api/his/screen";
export default {
    name: "TopInfo",
    data() {
        return {
            dataInfo: {
                todayWarningOrg: 0,
                totalWarningOrg: 0,
                todayHandled: 0,
                totalHandled: 0,

            }
        };
    },
	created() {
		  this.toDay();
	},
	methods: {
		toDay() {
		  //今日和总预警处置数
		  warnList().then(response => {
		        if(response.code ==200){
		        	this.dataInfo = response.data
		        }
		  });
		}
	},
};
</script>
<style lang="scss" scoped>
.top-info {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    position: relative;

    .icon {
      position: absolute;
      width: 50px;
      height: 50px;
      border-radius: 10px;
      background-image: url("~@/assets/images/home/home-top-logo1.png");
      background-repeat: no-repeat;
      background-position: center;
      left: 19px;
      top: 50%;
      transform: translateY(-50%);
    }

    .top-info__item {
        flex: 20%;
        margin-right: 32px;
        background: #FFFFFF;
        box-shadow: 0px 1px 7px 0px rgba(0, 0, 0, 0.11);
        border-radius: 20px;
        width: 216px;
        height: 76px;
        padding-left: 87px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        position: relative;

        &:nth-last-child(1) {
            margin-right: 0;
        }

        .label {
            font-weight: 500;
            font-size: 16px;
            color: #1F1F1F;
            line-height: 15px;
        }

        .value {
            margin-top: 8px;
            font-family: Gellix;
            font-weight: 500;
            font-size: 26px;
            color: #1F1F1F;
            line-height: 20px;
        }

        &::before {
            content: '';
            position: absolute;
            left: 19px;
            top: 50%;
            transform: translateY(-50%);
            width: 50px;
            height: 50px;
            border-radius: 10px;
        }
    }
}
</style>
